<template>
  <view class="banner">
    <image class="img" :src="respMallBannerDTO.bannerImage" />
  </view>
  <view class="list">
    <template v-if="respMallBannerInfoDTOList.length !== 0">
      <view class="initList card">
        <view
          class="item"
          v-for="item in respMallBannerInfoDTOList"
          :key="item.id"
        >
          <Commodity @change="handleGoodsChange" type="card" :data="item" />
        </view>
      </view>
    </template>
    <emptyList v-else-if="keyword"></emptyList>
  </view>
</template>

<!-- 常买清单 -->
<script setup>
import { ref, computed } from "vue";
import { mallBannerDetail } from "@/api/home";
import Commodity from "@/components/commodity/commodity.vue";
import { onLoad } from "@dcloudio/uni-app";
import { useShopStore } from "@/store/shop.js";
const shopStore = useShopStore();
const id = ref("");
const detail = ref({});
const respMallBannerDTO = computed(() => {
  return detail.value.respMallBannerDTO || [];
});
const respMallBannerInfoDTOList = computed(() => {
  return detail.value.respMallBannerInfoDTOList || [];
});
onLoad((params) => {
  if (params.id) {
    id.value = params.id;
    getDetail();
  }
});
const getDetail = async () => {
  const res = await mallBannerDetail({
    id: id.value,
  });
  detail.value = res;
  uni.setNavigationBarTitle({ title: res.respMallBannerDTO.bannerName });
};
const handleGoodsChange = (item) => {
  shopStore.updateData(item);
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.banner {
  margin: 0 15px 10px;
  .img {
    display: block;
    width: 100%;
    height: 146px;
  }
}
.list {
  .initList {
    margin-top: 10px;
    &.card {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .item {
        &:last-child {
          &:nth-child(2n - 1) {
            margin-right: 50%;
          }
        }
      }
    }
  }
}
</style>
